{include file="common/header.tpl"}    
    <div id="vfriendContainer">
        <div id="mainContent2L">
            <div class="vfriendContainer2L">
                <div class="vfriendContent2L">
                	<div class="leftCol">  
                    	{include file="account/navigation.tpl"}                 	
                    </div>
                    <div class="rightCol noBg">
                    	{if $strBrowser == "Chrome" || $strBrowser == "Safari"}
                    		{assign var="strDisplay" value="inline-block"}
                        {elseif $strBrowser == "Firefox"}
                        	{assign var="strDisplay" value="inline"}
                        {else}
                        	{*if $strBrowser == "MSIE"*}
                        	{assign var="strDisplay" value="block"}
                        {/if}
                    	{if $arrOther}
                            <div class="boxPreference">
                                <div class="headerTitle"><h3>Sở thích</h3></div>
                                <div class="preferenceItem">
                                    <div class="preferenceItems">
                                        <ul>
                                            {foreach key=i item=item from=$arrOther}
                                                <li class="{if $arrUpOther[$item.id]==$item.id}active{else}blue{/if}{if $i%4 == 0} firstChild{/if}" id="pre{$item.id}" onclick="javascript:choosePreference('{$item.id}','blue')">
                                                	<input type="hidden" name="ppre[]" id="id{$item.id}" value="{$item.id}" style="{if $arrUpOther[$item.id]==$item.id}display:{$strDisplay};{else}display:none;{/if}" />
                                                	<span style="background:url({$smarty.const.HOST_IMG}category/{$item.icon}) left center no-repeat;">{$item.name}</span>
                                               	</li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {/if}
                        {if $arrMovie}
                            <div class="boxPreference">
                                <div class="headerTitle"><h3>Điện ảnh</h3></div>
                                <div class="preferenceItem">
                                    <div class="preferenceItems">
                                        <ul>
                                            {foreach key=i item=item from=$arrMovie}
                                            	<li class="{if $arrUpMovie[$item.id]==$item.id}active{else}rose{/if}{if $i%4 == 0} firstChild{/if}" id="pre{$item.id}" onclick="javascript:choosePreference('{$item.id}','rose')">
                                                	<input type="hidden" name="ppre[]" id="id{$item.id}" value="{$item.id}" style="{if $arrUpMovie[$item.id]==$item.id}display:{$strDisplay};{else}display:none;{/if}" />
                                                	<span style="background:url({$smarty.const.HOST_IMG}category/{$item.icon}) left center no-repeat;">{$item.name}</span>
                                               	</li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {/if}
                        {if $arrMusic}
                            <div class="boxPreference">
                                <div class="headerTitle"><h3>Âm nhạc</h3></div>
                                <div class="preferenceItem">
                                    <div class="preferenceItems">
                                        <ul>
                                            {foreach key=i item=item from=$arrMusic}
                                                <li class="{if $arrUpMusic[$item.id]==$item.id}active{else}green{/if}{if $i%4 == 0} firstChild{/if}" id="pre{$item.id}" onclick="javascript:choosePreference('{$item.id}','green')">
                                                	<input type="hidden" name="ppre[]" id="id{$item.id}" value="{$item.id}" style="{if $arrUpMusic[$item.id]==$item.id}display:{$strDisplay};{else}display:none;{/if}"/>
                                                	<span style="background:url({$smarty.const.HOST_IMG}category/{$item.icon}) left center no-repeat;">{$item.name}</span>
                                               	</li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {/if}
                        {if $arrSport}
                            <div class="boxPreference">
                                <div class="headerTitle"><h3>Thể thao</h3></div>
                                <div class="preferenceItem">
                                    <div class="preferenceItems">
                                        <ul>
                                            {foreach key=i item=item from=$arrSport}
                                                <li class="{if $arrUpSport[$item.id]==$item.id}active{else}orange{/if}{if $i%4 == 0} firstChild{/if}" id="pre{$item.id}" onclick="javascript:choosePreference('{$item.id}','orange')">
                                                	<input type="hidden" name="ppre[]" id="id{$item.id}" value="{$item.id}" style="{if $arrUpSport[$item.id]==$item.id}display:{$strDisplay};{else}display:none;{/if}"/>
                                                	<span style="background:url({$smarty.const.HOST_IMG}category/{$item.icon}) left center no-repeat;">{$item.name}</span>
                                               	</li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {/if}
                    </div>
               	</div>
            </div>
        </div>
    </div>
{include file="common/footer.tpl"}